<template>
  <div class="container">
     <van-search 
      :value="value" 
      shape="round"
      @search="search"
      placeholder="输入姓名、账号" />
      <div class="line"></div>
      
      <div class="weui-cell findlist" v-for="(item,index) in list" :key="index">
          <div class="weui-cell__hd">
              <avatar :avatar="item.avatar" 
                      :Level="item.partner_level" 
                      :userId="item.id" 
                      :isAuth="item.is_auth" 
                      :isPartner="item.is_partner"></avatar>
          </div>
          <div class="weui-cell__bd">
              <div class="nickname">{{item.nickname}}</div>
              <div class="address"> <img src="/static/images/findadr.png" class="icon"/>
                  <span v-if="item.area">{{item.area}}</span>
                  <span v-else>还没有设置位置</span>
              </div>  
          </div>
          <div class="weui-cell__ft"></div>
      </div>
      <img :src="img+'/que/no_content@2x.png'" alt="" class="ques" v-show="queS">
  </div>

</template>

<script>
import Follow from "@/components/follow";
import avatar from "@/components/avatar";

import {find} from "@/api/find";

export default {
  components: {
      Follow,
      avatar
  },

  data () {
    return {
      user_id:0,
      coordinate:{
        latitude:0,
        longitude:0
      },
      page:1,
      list:[],
      load:false,
      keywords:"",
      img:this.$URL.imgurl,
      queS:false
    }
  },
  methods:{
     toInfo(e){
        
     },
     addphone(){
       console.log(1)
       wx.addPhoneContact({
          firstName: '大牙',//联系人姓名
          mobilePhoneNumber: "13734210705",//联系人手机号
          success:function(){

          },
          fail:function(){

          }
       })
     },
     search(e){
         let keyword=e.mp.detail;
         if(keyword){
            this.keywords=keyword
            this.page=1
            this.list=[]
            this.getList()
         }else{
           wx.showToast({
             title: '请输入关键字',
             icon: 'none',
             image: '',
             duration: 1500,
             mask: false,
             success: (result) => {
                
             },
             fail: () => {},
             complete: () => {}
           });
             
         }
         
     },
     getList(){
        let data={};
        data.page=this.page;
        data.user_id=this.user_id;
        data.type=99;
        data.lat=this.coordinate.latitude
        data.lng=this.coordinate.longitude
        data.keywords=this.keywords
        find(data).then(res=>{
           if(res.code==200){
             let lastpage=res.data.last_page;
             this.page==1?this.list=res.data.data:this.list=this.list.concat(res.data.data)
             this.lastpage>this.page?this.load=true:this.load=false
           }else if(res.code==201){
             this.show=true
           }
        }).catch(res=>{
           this.show=true
        })
     }
  },
  created () {
    
  },
  onShow(){
    Object.assign(this.$data, this.$options.data())
    this.user_id=wx.getStorageSync("user_info").id;
    this.coordinate=wx.getStorageSync("coordinate");  
    this.getList()
  },
  onReachBottom(){
    if(this.load){
       currentpage++
       this.getList()
    }
  },
  onHide(){
    
  }
}
</script>
<style>
</style>
<style lang="scss">
    .findNav{
      width:375px;
      height:40px;
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.07);
      text-align:center;
      font-size:14px;
      font-weight:500;
      line-height:40px;
      color:rgba(51,51,51,1);
      margin-bottom:15px;
      .active{
        color:rgba(70,183,255,1);
      }
    }
    .iconList{
        font-size:12px;
        font-weight:500;
        color:rgba(51,51,51,1);
        text-align:center;
        padding:15px 0;
        img{
          width:34px;
          height:34px;
          display:block;
          margin: 0 auto;
          margin-bottom:13px;
        }
        .phoneIcon{
          width:33px;
        }
        .weIcon{
          width:40px;
          height:33px;
        }
    }

    .findlist{
      padding:15px;
      .Avatar{
        width:55px;
        height:55px;
        .avatar{
          width:55px;
          height:55px;
        }
      }
      .nickname{
        font-size:14px;
        font-weight:500;
        color:rgba(51,51,51,1);
      }
      .address{
        font-size:12px;
        font-weight:500;
        color:rgba(26,132,251,1);
        line-height:1;
        padding-top:11px;
        .icon{
            width:16px;
            height:16px;
            margin-right:3px;
            vertical-align:middle;
        }
      }
      &::after{
        position:absolute;
        left:68px;
        right:18px;
        bottom:0;
        border-bottom:1px solid #ddd;
        content:"";
      }
    }
</style>
